﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>存钱罐</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/ydui.css?v=1.1.4" rel="stylesheet" />
    <script src="../js/ydui.flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/all.css?v=20180302"/>
    <style type="text/css">
        .m-grids-3 .grids-item:not(:nth-child(3n)):before {
            border: none;
        }

        .grids-item {
            padding: .4rem 0;
        }
    </style>
</head>

	<body ms-controller="userview" class="ms-controller">
		<div class="g-flexview">
			<div class="g-scrollview">
				<div class="coinbox-head">
					<div class="coinbox-content-head">
						<!--<div class="box-item">
							<p class="iconfont icon-0"></p>
							<p>存款</p>
						</div>-->
						<a class="box-item fl" href="balance.html">
							<p class="iconfont icon-qianbao1"></p>
							<p>存款</p> 
							<p class="price">¥{{@ModelData.Point}}</p>
						</a>
						<a class="box-item fr" href="quanlist.html">
							<p class="iconfont icon-yinxingqia"></p>
							<p>万能券</p>
						</a>						
					</div>
				</div>
				<p class="coinbox-title">购买万能券（至少可用90%存款）</p>
				<div class="coinbox-serve">
					<ul class="m-grids-3">
			            <li class="grids-item" ms-for="el in @CouponData" ms-on-tap="@Buy(el)">
			                <div class="grids-money">{{el.CValue}}元</div>
			            </li>
			        </ul>					
				</div>

                <p class="coinbox-title">说明</p>
                <p style="font-size: .27rem;padding:0.1rem 0.2rem;background-color:#fff;line-height:22px;">
                    存款和万能券只能消费抵现，不能提现。<br />
                    存款用于线上消费抵现金，万能券在线下消费抵现金。
                </p>
	        
			</div>

            <div class="m-cell" id="buycoupon" style="display:none;">
                <div class="cell-item">
                    <div class="cell-left">万能券</div>
                    <div class="cell-right" style="padding-left:5px;">
                        ¥{{@BuyModel.CValue}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">存款支付</div>
                    <div class="cell-right" style="padding-left:5px;color:#ff0000;">
                        ¥{{@BuyModel.Price2}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">需要支付</div>
                    <div class="cell-right" style="padding-left:5px;color:#ff0000;">
                        ¥{{@BuyModel.Price1}}
                    </div>
                </div>
            </div>

		</div>

        <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
        <script src="../js/ydui.js"></script>
        <script src="../js/avalon.mobile.min.js"></script>
        <script src="../js/ComFunJS.js?v=20180331"></script>
        <script>

        var model = avalon.define({
            $id: "userview",
            ModelData: {},
            CouponData: [],
            GetListData: function () {
                YDUI.dialog.loading.open("努力加载中...");
                $.getJSON("/api/user/userinfo", function (r) {
                    YDUI.dialog.loading.close();
                    if (r.error == "") {
                        model.ModelData = r.result;
                    }
                })

            },
            GetCouponData: function () {
                $.getJSON("/api/base/coupon/list", function (r) {
                    if (r.error == "") {
                        model.CouponData = r.result;
                    }
                })

            },
            BuyModel:{"CValue":0,"Price1":0,"Price2":0},
            Buy: function (el) {
                if (el) {
                    model.BuyModel.CValue = el.CValue;
                    model.BuyModel.Price1 = el.Price1; //现金支付
                    model.BuyModel.Price2 = el.Price2; //存款支付
                   

                    if (model.ModelData.Point < el.Price2) { //存款不够
                        model.BuyModel.Price2 = model.ModelData.Point;
                        var np = el.Price2 - model.ModelData.Point;
                        model.BuyModel.Price1 += np;
                    }

                   

                    YDUI.dialog.confirm("", $("#buycoupon").html(),
                        [
                    {
                        txt: '取消',
                        color: false, /* false:黑色  true:绿色 或 使用颜色值 */
                        callback: function () {

                        }
                    },
                    {
                        txt: '立即支付',
                        color: '#ff0000', /* 使用颜色值 */
                        callback: function () {
                            YDUI.dialog.loading.open("提交支付...");
                            $.getJSON("/api/user/buycoupon/" + el.ID, function (r) {
                                YDUI.dialog.loading.close();
                                if (r.error == "") {
                                    window.location.href = "../order/pay.html?id=" + r.result;
                                } else {
                                    YDUI.dialog.toast(r.error, "none", 2000);
                                }
                            })
                        }
                    }])

                }

            }

        });
        avalon.ready(function () {
            if (ComFunJS.isLogin(true)) {
                model.GetListData();
                model.GetCouponData();
            }
        })

        </script>

	</body>
</html>
